<template>
	<view class="container">
		<view class="header">
			<view class="call">
				{{ call }}{{userInfo.name }}
			</view>
		</view>
		<view class="calendar">
			<uni-calendar 
			class="uni-calendar--hook" 
			:selected="selected" 
			:showMonth="false" 
			@change="change" 
			@monthSwitch="monthSwitch" />
		</view>
		<view class="btns">
			<button class="attendance" @click="attendance">
				打卡
			</button>
			<button class="leave" @click="leave">
				请假
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getDate,
		getDateInfo
	} from '@/api/home.js'
	export default {
		data() {
			return {
				userInfo: null,
				call: null,
				selected: []
			}
		},
		created() {
			this.init()
			this.getCalendar()
		},
		methods: {
			// 初始化页面
			init() {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				const date = new Date()
				const hour = date.getHours()
				if (hour >= 6 && hour < 12) {
					this.call = '早上好！'
				} else if (hour >= 12 && hour < 14) {
					this.call = '中午好！'
				} else if (hour >= 14 && hour < 18) {
					this.call = '下午好！'
				} else {
					this.call = '晚上好！'
				}

			},
			// 获取日历上的数据
			async getCalendar() {
				const obj = {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1
				}
				const res = await getDate(obj)
				if (res.status == 0) {
					const obj = {
						id: this.userInfo.id
					}
					const response = await getDateInfo(obj)
					if (response.status === 0) {
						const arr = response.data
						for (let i = 0; i < arr.length; i++) {
							const obj = {
								date: this.getDate(arr[i].date).fullDate,
								info: this.getInfo(arr[i].type)
							}
							this.selected.push(obj)
						}
					}
				}
			},
			// 获取时间
			getDate(date) {
				const time = Date.parse(date)
				const dd = new Date(time)
				const y = dd.getFullYear()
				const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
				const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return {
					fullDate: y + '-' + m + '-' + d
				}
			},
			// 获取考勤信息
			getInfo(type) {
				switch (type) {
					case 'late':
						return '迟到'
						break
					case 'early':
						return '早退'
						break
					case 'field':
						return '外勤'
						break
					case 'lack':
						return '缺卡'
						break
					case 'absenteeism':
						return '旷工'
						break
					case 'leave':
						return '请假'
						break
					default:
						return '正常'
						break
				}
			},
			// 月份更换，页面数据更换
			async monthSwitch(e){
				const obj = {
					year : e.year,
					month: e.month
				}
				const res = await getDate(obj)
				if (res.status == 0 && res.data.length != 0) {
						console.log(res);
					const obj = {
						id: res.data[0].id
					}
					const response = await getDateInfo(obj)
					if (response.status == 0) {
						const arr = response.data
						for (let i = 0; i < arr.length; i++) {
							const obj = {
								date: this.getDate(arr[i].date).fullDate,
								info: this.getInfo(arr[i].type)
							}
							this.selected.push(obj)
						}
					}
				}
			},
			// 选择日期
			change(e){
			
			},
			// 考勤
			attendance(){
				uni.switchTab({
					url:'/pages/attendance/attendance'
				})
			},
			leave(){
				uni.switchTab({
					url:'/pages/leave/leave'
				})
			}
		}
	}
</script>]


<style lang="less" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.header {
			.call {
				font-size: 40rpx;
				color: red;
				font-weight: 800;
			}
		}
		.calendar{
			margin-top: 30rpx;
		}
		.btns{
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;
			.attendance,.leave{
				width: 35%;
				padding: 60rpx 0;
				background-color: aqua;
				color: #ffffff;
			}
		}
	}
	::v-deep .uni-calendar-item__weeks-box-item{
		width: 100% !important;
	}
</style>
